<template>
    <div id="lineChart" style="height: 700px; width: 1500px"></div>
</template>

<script>
import * as echarts from 'echarts'
import { findEveryTimeInOut } from '../../../http/request'

export default {
  name: 'index.vue',
  data () {
    return {
      in_num: [],
      out_num: [],
      hour: []
    }
  },
  mounted () {
    this.lineChart()
    findEveryTimeInOut().then(res => {
      for (let r in res.data) {
        console.log(res.data[r])
        this.in_num.push(res.data[r].inNum)
        this.out_num.push(res.data[r].outNum)
        this.hour.push(res.data[r].hour)
      }
      console.log(this.in_num),
      console.log(this.out_num),
      this.lineChart()
    })
  },
  methods: {
    lineChart () {
      let lineChart = echarts.init(document.getElementById('lineChart'))
      lineChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        title: {
          text: '一年中各时刻客流量'
        },
        legend: {
          data: ['出站人数', '进站人数'],
          textStyle: { fontSize: 16 }
        },
        xAxis: {
          name: '时间/h',
          type: 'category',
          data: this.hour,
          width: '1000px'
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          name: '出站人数',
          data: this.in_num,
          type: 'line',
          itemStyle: {
            color: '#5DC5E8'
          }
        },
        {
          name: '进站人数',
          data: this.out_num,
          type: 'line',
          itemStyle: {
            color: '#FF9600'
          }
        }]
      })
    }
  }
}
</script>

<style scoped>

</style>
